import React, { useState } from 'react'
import { Button, Input, Form, Toast, Radio } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import styles from './index.module.less'

const genderOptions = [
  { label: '男', value: 'male' },
  { label: '女', value: 'female' }
]

const RegisterPage: React.FC = () => {
  const [form] = Form.useForm()
  const navigate = useNavigate()
  const [loading, setLoading] = useState(false)
  // 移除Picker相关状态
  // const [genderVisible, setGenderVisible] = useState(false)

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields()
      setLoading(true)
      // 这里添加实际注册逻辑
      setTimeout(() => {
        Toast.show({ content: '注册成功', icon: 'success' })
        navigate('/login')
      }, 1000)
    } catch (error) {
      Toast.show({ content: '请完善注册信息', icon: 'fail' })
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className={styles.loginPage}>
      <div className={styles.loginBox}>
        <h2 className={styles.title}>用户注册</h2>
        <Form form={form} layout="horizontal">
          <Form.Item
            name="username"
            label="用户名"
            rules={[{ required: true, message: '用户名不能为空' }]}
          >
            <Input placeholder="请输入用户名" clearable />
          </Form.Item>

          <Form.Item
            name="phone"
            label="手机号"
            rules={[
              { required: true, message: '手机号不能为空' },
              { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }
            ]}
          >
            <Input placeholder="请输入手机号" clearable />
          </Form.Item>

          <Form.Item
            name="password"
            label="密码"
            rules={[{ required: true, message: '密码不能为空' }]}
          >
            <Input placeholder="请输入密码" type="password" clearable />
          </Form.Item>

          <Form.Item
            name="gender"
            label="性别"
            rules={[{ required: true, message: '请选择性别' }]}
          >
            <Radio.Group>
              <Radio value="male" style={{ marginRight: 20 }}>
                男
              </Radio>
              <Radio value="female">女</Radio>
            </Radio.Group>
          </Form.Item>

          <Button 
            block 
            color="danger" 
            onClick={handleSubmit}
            loading={loading}
            className={styles.loginBtn}
          >
            立即注册
          </Button>
          <Button 
            block 
            onClick={() => navigate(-1)}
            className={styles.loginBtn}
            style={{ color: '#9e9e9e' }}
          >
            已有账号，去登录
          </Button>
        </Form>
      </div>
    </div>
  )
}

export default RegisterPage